<!--创意社区 2022/4/11 dyl-->
<template>
  <div>
    <a-layout>
      <a-layout-content style="background-color: #F2F2E6">
        <div style="padding-top: 100px">
        </div>
<!--        头部卡片-->
        <v-row justify="center" no-gutters>
          <v-col cols="12" lg="10">
            <v-card color="#F2F2E6">
              <!--          视差效果-->
              <v-parallax
                src="../../public/images/creative.jpeg"
                height="350">
                <!--            图上的文字-->
                <div style="height: 350px;max-width: 350px;margin: 10px auto auto;">
                  <p style="font-family: HW,serif;letter-spacing:16px; font-size: 56px; color: #2C2E2D; font-weight: bolder;">创意社区</p>
                  <p align="center"
                     style="font-family: 宋体,serif;letter-spacing:8px; font-size: 20px; color: #2C2E2D; font-weight: bolder;margin-top: 15px">
                    分享你的想法
                  </p>
                </div>
              </v-parallax>
            </v-card>
          </v-col>
        </v-row>
        <br><br>
<!--                      按发布者昵称检索-->

        <v-row justify-lg="center">
          <v-col cols="12" lg="8">
              <div style="text-align: center; font-family: '华文楷体', sans-serif; font-weight: bold;">
                <a-input-search
                  v-model="input"
                  size="large"
                  style="width: 80%"
                  placeholder="可根据创意名称或用户名进行检索"
                  @search="get_data"></a-input-search>
              </div>
          </v-col>
        </v-row>
        <br>
        <v-row justify-lg="center">
          <v-col cols="12" lg="5" style="text-align: center" class="ZZGF-font-bold">
            <a-radio-group button-style="solid" default-value="time">
              <a-radio-button value="time" style="width: 12vw" @click="sort_time">
                按发布时间排序&nbsp;<a-icon type="caret-down" theme="filled" />
              </a-radio-button>
              <a-radio-button value="view" style="width: 12vw" @click="sort_view">
                按访问量排序&nbsp;<a-icon type="caret-down" theme="filled" />
              </a-radio-button>
              <a-radio-button value="collect" style="width: 12vw" @click="sort_collect">
                按收藏数排序&nbsp;<a-icon type="caret-down" theme="filled" />
              </a-radio-button>
            </a-radio-group>

          </v-col>
        </v-row>
        <br><br>

<!--        创意们-->
        <v-row no-gutters>
<!--          主体左半-->
          <v-col cols="12" lg="6">
            <v-row no-gutters>
<!--              网页左侧空白-->
              <v-col cols="12" lg="1"></v-col>
<!--              第一列创意们-->
              <v-col cols="12" lg="10">
<!--                第一列顶部填充-->
                <v-row>
                  <v-col>
                    <div style="height: 200px"></div>
                  </v-col>
                </v-row>
<!--                创意卡片组-->
                <v-row :key="reload">
                  <v-col cols="12" lg="12" v-for="(item, i) in creativity_list" v-if="i%2===0" :key="i">
                    <v-sheet min-height="650" class="fill-height" color="transparent">
                      <v-lazy
                        v-model="item.isActive"
                        :options="{
                          threshold: .5
                        }"
                        class="fill-height"
                        transition="slide-y-reverse-transition"
                      >
                        <v-card
                          height="500"
                          tile
                          class="fill-height"
                          :key="i"
                          elevation="0"
                        >
                          <v-row no-gutters>
<!--                        卡片上部左侧统计数据-->
                            <v-col cols="12" lg="2">
                              <v-img
                                height="300"
                                src="../../public/images/aside.png"
                              >
                                <br>
                                <v-row>
                                  <v-col cols="12" lg="12">
                                    <div style="text-align: right;padding-right: 1vw">
                                <span style="font-family: number,serif; font-weight: bold">
                                  {{getDisplayData(item.view)}}
                                </span>
                                      <br>
                                      <span style="font-family: 黑体,serif;color: grey">浏览</span>
                                    </div>
                                  </v-col>
                                </v-row>
                                <v-row v-if="true">
                                  <v-col cols="12" lg="12">
                                    <div style="text-align: right;padding-right: 1vw">
                                <span style="font-family: number,serif; font-weight: bold">
                                  {{getDisplayData(item.comments)}}
                                </span>
                                      <br>
                                      <span style="font-family: 黑体,serif;color: grey">评论</span>
                                    </div>
                                  </v-col>
                                </v-row>
                                <v-row>
                                  <v-col cols="12" lg="12">
                                    <div style="text-align: right;padding-right: 1vw">
                                <span style="font-family: number,serif; font-weight: bold">
                                  {{getDisplayData(item.collections)}}
                                </span>
                                      <br>
                                      <span style="font-family: 黑体,serif;color: grey">收藏</span>
                                    </div>
                                  </v-col>
                                </v-row>
                              </v-img>
                            </v-col>
                            <v-col cols="12" lg="10">
<!--                          卡片上部右侧图片部分（聚焦事件产生遮罩层）-->
                              <v-hover>
                                <template v-slot:default="{ hover }">
                                  <v-img
                                    height="300"
                                    :src=item.communityPic
                                    :lazy-src=item.communityPic
                                    v-if="item.communityPic!==null"
                                  >
                                    <v-fade-transition>
                                      <v-overlay
                                        v-if="hover"
                                        absolute
                                        color="#2C2E2D"
                                      >
                                        <v-btn @click="open(item)">了解更多</v-btn>
                                      </v-overlay>
                                    </v-fade-transition>
                                  </v-img>
                                  <v-img
                                    height="300"
                                    src="../../public/images/flat_photos.png"
                                    v-else
                                  >
                                    <v-fade-transition>
                                      <v-overlay
                                        v-if="hover"
                                        absolute
                                        color="#2C2E2D"
                                      >
                                        <v-btn @click="open(item)">了解更多</v-btn>
                                      </v-overlay>
                                    </v-fade-transition>
                                  </v-img>
                                </template>
                              </v-hover>
                            </v-col>
                          </v-row>
<!--                          卡片下部信息部分-->
                          <v-row no-gutters>
<!--                            创意名称和标签-->
                            <v-col cols="12" lg="8">
                              <v-card tile elevation="0" height="100">
                                <v-card-title style="font-weight: bold; font-size: x-large">
                                  {{item.name}}
                                </v-card-title>
                                <div v-for="(fe,i) in item.feature" style="display: inline">
                                  &nbsp;
                                  <v-chip :key="i" v-if="i<=2">
                                    {{fe}}
                                  </v-chip>
                                </div>
                              </v-card>
                            </v-col>
<!--                            发布用户头像昵称-->
                            <v-col cols="12" lg="4">
                              <v-card tile elevation="0" height="100">
                                <div style="padding-top: 30px">
                                  <v-avatar size="40" @click="get_to_user(item.userDTO.id)" style="cursor: pointer">
                                    <img
                                      alt="user"
                                      v-lazy="item.userDTO.profilepic"
                                    />
                                  </v-avatar>
                                  <span style="font-weight: bold; font-family: 微软雅黑,serif; cursor: pointer" @click="get_to_user(item.userDTO.id)">
                                    &nbsp;&nbsp;{{item.userDTO.nickname}}
                                  </span>
                                </div>
                              </v-card>
                            </v-col>
<!--                            其他信息-->
                            <v-col cols="12" lg="12">
                              <v-card tile elevation="0" height="110">
                                <v-card-subtitle>
                                  <p>{{item.detail}}...</p>
                                  <p>
                                    <span>
                                      {{item.type}}类
                                    </span>
                                    <span class="float-lg-right">
                                      发布于&nbsp;&nbsp;{{item.createTime}}&nbsp;&nbsp;&nbsp
                                    </span>
                                  </p>
                                </v-card-subtitle>
                              </v-card>
                            </v-col>
                          </v-row>
                        </v-card>
                      </v-lazy>
                    </v-sheet>
                  </v-col>
                </v-row>
              </v-col>
<!--              左侧中间长卡片-->
              <v-col cols="12" lg="1">
                <v-card height="450" outlined tile></v-card>
                <v-card
                  v-for="(item,i) in creativity_amount"
                  height="675"
                  outlined
                  tile
                  :key="i"
                ></v-card>
                <v-card height="500" outlined tile></v-card>
              </v-col>
            </v-row>
          </v-col>
<!--          主体右半-->
          <v-col cols="12" lg="6">
            <v-row no-gutters>
<!--              右侧中间长卡片-->
              <v-col cols="12" lg="1">
                <v-card height="600" outlined tile></v-card>
                <v-card
                  v-for="(item,i) in creativity_amount"
                  height="675"
                  outlined
                  tile
                  :key="i"
                ></v-card>
                <v-card height="350" outlined tile></v-card>
              </v-col>
<!--              第二列创意们-->
              <v-col cols="12" lg="10">
<!--                第二列顶部填充区-->
                <v-row no-gutters>
                  <v-col cols="12" lg="12">
<!--                     排序卡片（一部分填充效果）-->
                    <v-card outlined elevation="0" tile height="225" width="575">
                      <v-row no-gutters>
                        <v-col cols="12" lg="12">
                          <v-card tile outlined elevation="0" height="160">
                            <div style="height: 160px">
                              <div style="height: 80px">
                                <v-container>
                                  <span style="color: grey;font-family: 黑体,serif; font-size: x-large">
                                    共有
                                  </span>
                                  <span style="font-family: number,serif;font-size: x-large; font-weight: bold">
                                    {{this.user_count}}
                                  </span>
                                  <span style="color: grey;font-family: 黑体,serif; font-size: x-large">
                                    名用户在这里分享了
                                  </span>
                                  <span style="font-family: number,serif;font-size: x-large; font-weight: bold">
                                    {{this.creativity_count}}
                                  </span>
                                  <span style="color: grey;font-family: 黑体,serif; font-size: x-large">
                                    个创意
                                  </span>
                                </v-container>
                              </div>
                            </div>
                          </v-card>
                        </v-col>
                      </v-row>
                      <v-card outlined tile height="65" width="575">
                        <v-container>
                          <v-btn class="float-lg-right" depressed color="rgba(64,64,64,0.9)" @click="get_to_create">
                            <span style="letter-spacing: 5px; color: #fff">分享我的创意</span>
                            <v-icon right color="#FFFAF4">
                              mdi-arrow-right
                            </v-icon>
                          </v-btn>
                        </v-container>

                      </v-card>
                    </v-card>
                  </v-col>
                </v-row>
<!--                纯填充块-->
                <v-row>
                  <v-col>
                    <div style="height: 125px"></div>
                  </v-col>
                </v-row>
<!--                创意卡片组-->
                <v-row :key="reload">
                  <v-col cols="12" lg="12" v-for="(item, i) in creativity_list" v-if="i%2===1" :key="i">
                    <v-sheet min-height="650" class="fill-height" color="transparent">
                      <v-lazy
                        v-model="item.isActive"
                        :options="{
                          threshold: .5
                        }"
                        class="fill-height"
                        transition="slide-y-reverse-transition"
                      >
                        <v-card
                          style="height: 500px"
                          tile
                          class="fill-height"
                          :key="i"
                          elevation="0"
                        >
                          <v-row no-gutters>
<!--                        卡片上部左侧图片部分（聚焦事件产生遮罩层）-->
                            <v-col cols="12" lg="10">
                              <v-hover>
                                <template v-slot:default="{ hover }">
                                  <v-img
                                    height="300"
                                    :src=item.communityPic
                                    :lazy-src=item.communityPic
                                    v-if="item.communityPic!==null"
                                  >
                                    <v-fade-transition>
                                      <v-overlay
                                        v-if="hover"
                                        absolute
                                        color="#2C2E2D"
                                      >
                                        <v-btn @click="open(item)">了解更多</v-btn>
                                      </v-overlay>
                                    </v-fade-transition>
                                  </v-img>
                                  <v-img
                                    height="300"
                                    src="../../public/images/flat_photos.png"
                                    v-else
                                  >
                                    <v-fade-transition>
                                      <v-overlay
                                        v-if="hover"
                                        absolute
                                        color="#2C2E2D"
                                      >
                                        <v-btn @click="open(item)">了解更多</v-btn>
                                      </v-overlay>
                                    </v-fade-transition>
                                  </v-img>
                                </template>
                              </v-hover>
                            </v-col>
<!--                        卡片上部右侧统计数据-->
                            <v-col cols="12" lg="2">
                              <v-img
                                height="300"
                                src="../../public/images/aside.png"
                              >
                                <br>
                                <v-row>
                                  <v-col cols="12" lg="12">
                                    <div style="text-align: left;padding-left: 1vw">
                                <span style="font-family: number,serif; font-weight: bold">
                                  {{getDisplayData(item.view)}}
                                </span>
                                      <br>
                                      <span style="font-family: 黑体,serif;color: grey">浏览</span>
                                    </div>
                                  </v-col>
                                </v-row>
                                <v-row v-if="true">
                                  <v-col cols="12" lg="12">
                                    <div style="text-align: left;padding-left: 1vw">
                                <span style="font-family: number,serif; font-weight: bold">
                                  {{getDisplayData(item.comments)}}
                                </span>
                                      <br>
                                      <span style="font-family: 黑体,serif;color: grey">评论</span>
                                    </div>
                                  </v-col>
                                </v-row>
                                <v-row>
                                  <v-col cols="12" lg="12">
                                    <div style="text-align: left;padding-left: 1vw">
                                <span style="font-family: number,serif; font-weight: bold">
                                  {{getDisplayData(item.collections)}}
                                </span>
                                      <br>
                                      <span style="font-family: 黑体,serif;color: grey">收藏</span>
                                    </div>
                                  </v-col>
                                </v-row>
                              </v-img>
                            </v-col>
                          </v-row>
<!--                          卡片下部信息-->
                          <v-row no-gutters>
<!--                            创意名称和标签-->
                            <v-col cols="12" lg="8">
                              <v-card tile elevation="0" height="100">
                                <v-card-title style="font-weight: bold; font-size: x-large">
                                  {{item.name}}
                                </v-card-title>
                                <div v-for="(fe,i) in item.feature" style="display: inline">
                                  &nbsp;&nbsp;
                                  <v-chip :key="i" v-if="i<=2">
                                    {{fe}}
                                  </v-chip>
                                </div>
                              </v-card>
                            </v-col>
<!--                            发布用户头像昵称-->
                            <v-col cols="12" lg="4">
                              <v-card tile elevation="0" height="100">
                                <div style="padding-top: 30px">
                                  <v-avatar size="40" @click="get_to_user(item.userDTO.id)" style="cursor: pointer">
                                    <img
                                      alt="user"
                                      v-lazy="item.userDTO.profilepic"
                                    />
                                  </v-avatar>
                                  <span style="font-weight: bold; font-family: 微软雅黑,serif; cursor: pointer" @click="get_to_user(item.userDTO.id)">
                                    &nbsp;&nbsp;{{item.userDTO.nickname}}
                                  </span>
                                </div>
                              </v-card>
                            </v-col>
<!--                            其他信息-->
                            <v-col cols="12" lg="12">
                              <v-card tile elevation="0" height="110">
                                <v-card-subtitle>
                                  <p>{{item.detail}}...</p>
                                  <p>
                                    <span>
                                      {{item.type}}类
                                    </span>
                                    <span class="float-lg-right">
                                      发布于&nbsp;&nbsp;{{item.createTime}}&nbsp;&nbsp;&nbsp
                                    </span>
                                  </p>
                                </v-card-subtitle>
                              </v-card>
                            </v-col>
                          </v-row>
                        </v-card>
                      </v-lazy>
                    </v-sheet>
                  </v-col>
                </v-row>
              </v-col>
<!--              网页右侧空白-->
              <v-col cols="12" lg="1"><a-back-top /></v-col>
            </v-row>
          </v-col>
        </v-row>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Creativity_Community",
  data: () => ({
    creativity_list: [], //创意列表
    creativity_count: 0, //创意总数
    user_count: 0, //用户总数
    search_type: '',
    sortType: 'time',
    list_time: [], //时间排序列表
    list_view: [], //浏览量排序列表
    reload: 0, //重新渲染
    list_collect: [], //收藏排序列表
    creativity_amount: 0, //创意数量(半边)
    loading: false, //加载中
    input: '', //搜索栏输入内容
    class_list:['人类生活需要（农、轻、医)', '作业、运输', '化学、冶金', '纺织、造纸', '固定建筑物',
      '机械工程、照明、加热、武器、爆破', '物理', '电学'], //分类
  }),
  methods: {
    get_data() { //搜索
      request.get("/creative/getBySearch", {
        params: {
          keyWord: this.input
        }
      }).then(res => {
        if(res.data.time.length === 0) {
          this.$message.warn("暂无搜索结果")
        } else {
          this.list_view = res.data.view
          this.list_collect = res.data.collection
          this.list_time = res.data.time
          this.creativity_amount = Math.floor(this.list_time.length/2)
          for(let item of this.list_view) {
            item.isActive = false
          }
          for(let item of this.list_collect) {
            item.isActive = false
          }
          for(let item of this.list_time) {
            item.isActive = false
          }
          this.creativity_list = this.list_time
          this.$vuetify.goTo(600, {
            duration: 500,
            offset: -100,
            easing: 'easeInOutCubic',
          })
        }
      })
    },
    open(item) { //打开一个创意并跳转
      request.get('/creative/' + item.id).then(res =>{
        if (res.code === '200'){
          if(res.data.statement !== '已发布'){
            let notfoundUrl = this.$router.resolve({path: "/creative404"});
            window.open(notfoundUrl.href, '_blank');
          }
          else{
            request.post('/creative/updateView', {id: parseInt(item.id)}).then(res => {
              let routeUrl = this.$router.resolve({
                path: "/creativeInfo",
                query:{creative: window.btoa(window.encodeURIComponent(item.id))}
              });
              window.open(routeUrl.href, '_blank');
            })
          }
        }else {
          let notfoundUrl = this.$router.resolve({path: "/creative404"});
          window.open(notfoundUrl.href, '_blank');
        }
      })
    },
    get_to_user(id) { //打开一个用户的个人主页
      let routeUrl = this.$router.resolve({
        path: "/userInfo",
        query:{user: window.btoa(window.encodeURIComponent(id))}
      });
      window.open(routeUrl.href, '_blank');
    },
    get_to_create() { //前往创作页面
      this.$router.push('/idea_submission')
    },
    get_user_count() {
      request.get("/creative/getUserCount").then(res => {
        this.user_count = res.data
      })
    },
    sort_time() { //按时间排序
      this.creativity_list = this.list_time
      this.reload += 1
    },
    sort_view() { //按访问量排序
      this.creativity_list = this.list_view
      this.reload += 1
    },
    sort_collect() { //按收藏量排序
      this.creativity_list = this.list_collect
      this.reload += 1
    },
    getDisplayData(data){
      if(data >= 10000) {
        return data = Math.floor(data/10000) + "万+"
      }
      else
        return data
    },
    get_creativity_list() { //从后端获取创意
      request.get("/creative").then(res => {
        this.list_view = res.data.view
        this.list_collect = res.data.collection
        this.list_time = res.data.time
        this.creativity_amount = Math.floor(this.list_time.length/2)
        this.creativity_count = res.data.time.length
        for(let item of this.list_view) {
          item.isActive = false
        }
        for(let item of this.list_collect) {
          item.isActive = false
        }
        for(let item of this.list_time) {
          item.isActive = false
        }
        this.creativity_list = this.list_time
      })
    }
  },
  created() {
    this.get_creativity_list()
    this.get_user_count()
  }
}
</script>

<style scoped>

</style>
